<template>
 <view>
   <u-list @scrolltolower="scroll" :pagingEnabled="true" @scrollWithAnimation="true" :key="listKey">
     <u-list-item v-for="(item, index) in items" :key="index" class="custom-list-item" >
       <view @click="dealError(item)">
         <u-cell :title="`料架：${item.rackBarcode}`"></u-cell>
         <u-cell :title="`位置：${item.locBarcode}`"></u-cell>
         <u-cell :title="`物料：${item.materielCD}`"></u-cell>
         <u-cell :title="`流水号：${index + 1}`"></u-cell>
       </view>
     </u-list-item>
   </u-list>
   <view class="fixed-bottom">
     <u-button @click="dealAll">全部处理</u-button>
   </view>
 </view>
</template>
<script>
import UList from "../../../../uview-ui/components/u-list/u-list.vue";
import UCell from "../../../../uview-ui/components/u-cell/u-cell.vue";
import UListItem from "../../../../uview-ui/components/u-list-item/u-list-item.vue";
import {dealErrorStock, getRackErrorInfo} from "@/api/work/rack/rackUtil";
import UButton from "../../../../uview-ui/components/u-button/u-button.vue";

export default {
  name: 'index',
  components: {UButton, UListItem, UCell, UList},
  data () {
    return {
      items:[],
      liteKey: Date.now(),
    }
  },
  methods: {
    scroll() {
      this.items = [];
      getRackErrorInfo().then(res => {
        this.listKey = Date.now();
        this.items = JSON.parse(res.data);
      });
    },
    dealError(item) {
      dealErrorStock(item.locID).then(res=>{
        if (res.status === '0') {
          uni.showToast({icon: 'none', title: '处理成功'})
        } else {
          uni.showToast({icon: 'none', title: res.error})
        }
        this.scroll();
      });
    },
    dealAll() {
      let that = this;
      this.items.forEach((item, index) => {
         dealErrorStock(item.locID).then(res=>{
           if (res.status === '0') {
             uni.showToast({icon: 'none', title: '处理成功'})
           } else {
             uni.showToast({icon: 'none', title: res.error})
           }
         });
         that.scroll();
      });
    },
  },
  onLoad() {
    this.scroll();
  }
}

</script>
<style>
.custom-list-item {
  background-color: #ADD8E6;

  /* 如果需要让整个列表项点击区域都生效，可能还需要下面这行 */
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  height: 100%; /* 根据实际情况调整高度 */
}

.fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 可能需要设置一些内边距或外边距以保持良好的视觉效果 */
  padding: 10px;
  text-align: center;
  background-color: #fff; /* 背景色与页面背景色相同或透明，视设计而定 */
  z-index: 999; /* 确保按钮在最上层 */
}
</style>
